﻿{extend name="public:base" /}{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">
<style>
    .layui-colorpicker {
        width: 38px;
        height: 38px;
        border: 1px solid #eee;
        padding: 5px;
        border-radius: 2px;
        line-height: 24px;
        display: inline-block;
        cursor: pointer;
        transition: all .3s;
        -webkit-transition: all .3s;
    }

    .layui-colorpicker-main-input input.layui-input {
        width: 110px;
        height: 30px;
        color: #666;
    }

    .color-box, .username-box {
        display: flex;
        flex-wrap: wrap;
    }

    .show-color {
        position: relative;
        width: 50px;
        height: 30px;
        margin-right: 20px;
        margin-bottom: 20px;
    }


    .show-username {
        position: relative;
        /*width: 100px;*/
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #eee;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .show-color i, .show-username i {
        position: absolute;
        top: -7px;
        right: -7px;
        font-size: 14px;
        color: #fff;
        background: rgba(0, 0, 0, .5);
        border-radius: 50%;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
    }
</style>{/block}{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">内容</label>
                                <div class="col-sm-4">
                                    <div class="layui-form-item">
                                        <div class="layui-input-inline">
                                            <input type="text" class="form-control username" placeholder="请输入内容">
                                        </div>
                                        <button type="button" class="btn btn-w-m btn-primary add-username" style="margin-left: 25px">添加内容</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-item box-item-content">
                            <div class="row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-lg-6 username-box">
                                    {volist name="user_virtual_data" id="username"}
                                    <div class="show-username">
                                        <div class="username-text">{$username}</div>
                                        <i class="iconfont icon-close del-username"></i></div>
                                    {/volist}
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>


                        <div class="box-item box-item-content">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">颜色</label>
                                <div class="col-lg-4">
                                    <div class="layui-form-item">
                                        <div class="layui-input-inline">
                                            <input type="text" name="color" value="" placeholder="请选择颜色" class="layui-input" id="ID-colorpicker-demo-form-color" readonly>
                                        </div>
                                        <div class="layui-inline" style="left: -11px;">
                                            <div id="ID-colorpicker-demo-form"></div>
                                        </div>
                                        <button type="button" class="btn btn-w-m btn-primary add-color" style="margin-top: -10px;">添加颜色</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="box-item box-item-content">
                            <div class="row">
                                <label class="col-sm-1 col-form-label"></label>
                                <div class="col-lg-6">
                                    <div class="color-box">
                                        {volist name="background_virtual_data" id="background"}
                                        <div class="show-color" data-color="{$background}" style="background: {$background}">
                                            <i class="iconfont icon-close del-color"></i>
                                        </div>
                                        {/volist}
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>


                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-lg-1 col-form-label">开关</label>
                                <div class="col-lg-3">
                                    <input type="radio" name="is_open" value="1" title="开启" {$is_open !=0 ? 'checked' : ''}>
                                    <input type="radio" name="is_open" value="0" title="关闭" {$is_open== 0 ? 'checked' : ''}>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-primary confirm-save">保存</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name='js'}
<script src="__STATIC__/layui/layui.js"></script>
<script>
    layui.use(function () {
        var colorpicker = layui.colorpicker;
        var $ = layui.$;
        // 渲染颜色选择器
        colorpicker.render({
            elem: '#ID-colorpicker-demo-form',
            color: '#1c97f5',
            done: function (color) {
                $('#ID-colorpicker-demo-form-color').val(color);
            }
        });

        // 获取DOM元素
        var addBtn = $('.add-color');
        var colorInput = $('#ID-colorpicker-demo-form-color');
        var colorBox = $('.color-box');

        // 颜色添加功能
        addBtn.on('click', function () {
            // 获取选中的颜色值
            var selectedColor = colorInput.val().trim();
            if (!selectedColor) {
                layer.msg('请先选择颜色', {icon: 5});
                return;
            }

            // 创建颜色块HTML
            var colorItem = '<div class="show-color" data-color="' + selectedColor + '" style="background: ' + selectedColor + '">' +
              '<i class="iconfont icon-close del-color"></i>' +
              '</div>';

            // 将颜色块添加到容器
            colorBox.append(colorItem);
            colorInput.val('');
        });

        // 颜色删除功能（事件委托处理动态生成元素）
        colorBox.on('click', '.del-color', function () {
            $(this).parent('.show-color').remove();
        });

        // 用户名添加和删除功能
        // 获取DOM元素
        var addUsernameBtn = $('.add-username');
        var usernameInput = $('.username');
        var usernameBox = $('.username-box');

        // 用户名添加功能
        addUsernameBtn.on('click', function () {
            // 获取输入的用户名
            var username = usernameInput.val().trim();
            if (!username) {
                layer.msg('请先输入姓名', {icon: 5});
                return;
            }

            // 创建用户块HTML
            var usernameItem = '<div class="show-username">' +
              '<div class="username-text">' + username + '</div>' +
              '<i class="iconfont icon-close del-username"></i>' +
              '</div>';

            // 将用户块添加到容器
            usernameBox.append(usernameItem);
            // 清空输入框
            usernameInput.val('');
        });

        // 用户名删除功能（事件委托处理动态生成元素）
        usernameBox.on('click', '.del-username', function () {
            $(this).parent('.show-username').remove();
        });
    });

    $('.confirm-save').on('click', function () {
        var username_list = [];
        $('.show-username').each(function () {
            username_list.push($(this).find('.username-text').text());
        });
        var color_list = [];
        $('.show-color').each(function () {
            color_list.push($(this).data('color'));
        });

        // username_list 转换 字符串
        var user_virtual_data = username_list.length > 0 ? username_list.join(',') : '';
        var background_virtual_data = color_list.length > 0 ? color_list.join(',') : '';
        var is_open = $('input[name="is_open"]:checked').val();

        $.post('{:url("clockVirtual")}', {
            user_virtual_data, background_virtual_data, is_open
        }, res => {
            if (res.result == 1) {
                layer.msg('保存成功', {icon: 6});
                setTimeout(() => {
                    location.reload();
                }, 1000)
            } else {
                layer.msg(res.msg, {icon: 5});
            }
        }, 'JSON');
    });
</script>{/block}
